<template>
    <div class="NavMenu">
        <div style="">
            <el-menu
                    :default-active="toIndex"
                    class="el-menu-demo"
                    text-color="#000000"
                    active-text-color="#3989fa"
                    mode="horizontal"
                    @select="handleSelect"
            >
                <div style=" display: flex;max-width: 100%">
                    <!--                个人中心下拉列表-->
                    <el-menu-item style="margin-bottom: 10px;padding: 5px">
                        <el-dropdown trigger="click">
                            <img :src="imgurl" alt="请上传头像" class="userMessage">
                            <el-dropdown-menu>
                                <div @click="handleSelect('/personalcenter')">
                                    <el-dropdown-item>个人中心</el-dropdown-item>
                                </div>
                                <div>
                                    <el-dropdown-item @click.native="clearuser">退出</el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-menu-item>
<!--                导航栏-->
                <el-menu-item style="margin-bottom: -20px;padding: 11px" v-for="(item, index) in itemList" :index="item.path" :key="index">
                    <span slot="title" style="font-size: 8px">{{ item.title }}</span>
                </el-menu-item>
                </div>
                <!--                <el-menu-item style="margin-left: 800px">
                                    <div class="box1">
                                        <img src="@/assets/images/个人中心图片.png" alt="" class="userMessage" @mouseover="showInfo" @mouseleave="hideInfo">
                                        <div v-show="userinfo" class="box2">
                                            <p @click="">个人信息</p>
                                            <p @click="">退出</p>
                                        </div>
                                    </div>
                                </el-menu-item>-->
            </el-menu>
        </div>
        <el-main>
            <router-view></router-view>
        </el-main>
    </div>
</template>

<script>
import {getAvatar} from "@/views/header/Headeruser";

export default {
    name: "NavMenu",
    data() {
        return {
            //展示的头像地址
            imgurl: '',
            // userinfo: false,
            itemList: [    // 水平一级菜单栏的菜单
                {path: '/shop', title: '首页'},
                {path: '/shopmanage', title: '商品管理'},
                {path: '/chatroom', title: '聊天室'},
                {path: '/shoplive', title: '我的收藏'},
                {path: '/aboutus', title: '关于我们'},
            ],
        };
    },
    computed: {
        toIndex() {  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
            return '/' + this.$route.path.split('/')[1];
        },
    },
    mounted() {
        this.updateuserurl()
    },
    beforeMount() {
        this.updateuserurl()
    },
    methods: {
        //重新获取头部的用户头像

        updateuserurl() {
            if (window.sessionStorage.getItem("token") !== null) {
                if (this.$store.state.user.avatar === null) {
                    if (this.$store.state.user.sex === '男') {
                        this.imgurl = require("@/assets/images/userman.png")
                    } else if (this.$store.state.user.sex === '女') {
                        this.imgurl = require("@/assets/images/userwoman.jpg")
                    }
                } else{
                    getAvatar(this.$store.state.user.username).then(response => {
                        // 处理响应数据
                        this.imgurl = response.data.url
                    })
                        .catch(error => {
                            // 处理错误
                            console.error(error);
                        });
                }
            } else {
                this.imgurl = require("@/assets/images/个人中心图片.png")
            }
        },
        // 根据用户选择的路由，切换菜单栏
        handleSelect(path) {
            this.$router.push({
                path: path
            });
        },
        //点击退出登录时的业务逻辑
        clearuser() {
            if (window.sessionStorage.getItem("token") !== null) {
                this.$message.warning("退出登录成功！！")
                // console.log(111)
                // console.log( window.sessionStorage.getItem("token"))
                //清除所保留的token
                window.sessionStorage.removeItem("token")
                sessionStorage.clear();
                this.handleSelect('/shop')
                // console.log( window.sessionStorage.getItem("token"))
                //删除sessionStorage中的数据
                /*sessionStorage.clear()
                //清除Vuex的缓存，让当前页面刷新
                window.location.reload()*/
                //重置vuex的缓存数据
                this.$store.commit("SET_INFO", null)
                this.$store.state.imgurl = null
                this.$store.state.role = null
            } else {
                this.$message.error("未登录！！")
            }
        }
    },

};
</script>

<style scoped>
/*个人中心图标大小*/
.userMessage {
    width: 55px;
    border-radius: 50%;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.el-menu-demo {
    height: auto;
    width: 100%;
    background-color: #e7ffe8;
    z-index: 999;
    margin: auto;
    position: relative;
}

.el-table {
    height: auto;
    max-width: 100%
}

.NavMenu {
    height: auto;
    max-width: 100%
}
</style>
